<!--
 * @author luguoxiang
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <view class="app-page page-space">
    <view class="header">
      <view class="title">
        我的
      </view>
      <view class="icons">

      </view>
    </view>
    <view class="user-info">
      <image class="user-info-l" :src="getFileAccessAuthUrl(userInfo.avatar)" mode=""></image>
      <view class="user-info-r">
        <view class="user-info-rt">
          {{ userInfo.nickname }}
        </view>
        <view class="user-info-rb">
          <view class="user-info-tag">
            {{ userType[userInfo.userType] }}
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="list-item">
        <lg-icon name="setting" size="24px" />
        <view class="list-t">设置</view>
        <lg-icon name="right" size="24px" />
      </view>
      <view class="list-item" @tap="to('/pages/my/update-pwd')">
        <lg-icon name="key" size="24px" />
        <view class="list-t">修改密码</view>
        <lg-icon name="right" size="24px" />
      </view>
      <view class="list-item" @tap="scan()">
        <lg-icon name="scan" size="24px" />
        <view class="list-t">扫一扫</view>
        <lg-icon name="right" size="24px" />
      </view>
      <view class="list-item">
        <lg-icon name="info" size="24px" />
        <view class="list-t">关于我们</view>
        <lg-icon name="right" size="24px" />
      </view>
      <view @click="onLogout" style="line-height: 44px;margin-top: 56px;border-radius: 8px;background: #EEF3F7;text-align: center;color: #FF4D4F;">
        退出登录
      </view>
    </view>
  </view>
</template>

<script setup>
import {getUser, mustLogin, removeAccountInfo} from "@/store/account"
import {ref} from "vue";
import {logout} from "@/api/account";
import {getFileAccessAuthUrl} from "@/soar/utils/file";
import {useDict} from "@/soar/hooks/dict";
import {to} from "@/soar/utils/uniUtils";
import {decodeQrcode} from "@/api/common";
import * as codeLoginApi from "@/api/codeLogin";

mustLogin()

const userInfo = ref({});
const { ['user-type']: userType } = useDict('user-type')

function onLogout() {
  uni.showModal({
    title: '确定退出登录吗？',
    success(res) {
      if (res.confirm) {
        logout().finally(() => {
          uni.reLaunch({ url: '/pages/anon/login' })
          removeAccountInfo();
        })
      }
    }
  })
}

getUser().then(res => {
  userInfo.value = res
})

function scanHandle(res) {
	if (res.startsWith('$qrauth:')) {
	  const code = res.replace('$qrauth:', '');
	  uni.showModal({
	    title: '扫码登录',
	    content: '该操作将授权PC端登录，是否同意授权登录？',
	    success(res) {
	      if (res.confirm) {
	        codeLoginApi.handle({ code, allowable: true })
	      }
	    }
	  })
	}
}

function scan() {
  // #ifdef H5
  uni.chooseImage({
    sizeType: ['compressed'],
    success: (res) => {
      decodeQrcode(res.tempFilePaths[0]).then(res => {
        scanHandle(res.data)
      })
    }
  })
  // #endif
  // #ifndef H5
  uni.scanCode({
  	success({ result }) {
  		scanHandle(result)
  	}
  })
  // #endif
}
</script>

<style lang="scss">
.app-page {
  background-image:url('@/static/images/my-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  height: calc(100vh - 50px);
  padding-top: 44px;
  .header {
    line-height: $app-nav-bar-height;
    display: flex;
    .title {
      flex: 1;
      font-size: 24px;
      opacity: 0.9;
      font-weight: 600;
    }
  }
  .user-info {
    height: 100px;
    border-radius: 16px;
    opacity: 1;
    background: #FFFFFF;
    margin-top: $uni-spacing-col-base;
    padding: 22px 24px;
    display: flex;
    .user-info-l {
      width: 56px;
      height: 56px;
      border-radius: 50%;
    }
    .user-info-r {
      flex: 1;
      padding-left: $uni-spacing-row-base;
    }
    .user-info-rt {
      line-height: 32px;
      font-size: 18px;
    }
    .user-info-tag {
      line-height: 20px;
      border-radius: 6px;
      padding: 0 10px;
      background: #1759ED;
      font-size: 12px;
      color: #FFFFFF;
      display: inline-block;
    }
  }
  .list {
    margin-top: $uni-spacing-col-base;
    .list-item {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      height: 42px;
      border-radius: 8px;
      background: #F9F9F9;
      padding: 0 $uni-spacing-row-base;
      .list-t {
        flex: 1;
        padding: 0 $uni-spacing-row-base;
      }
    }
  }
}
</style>
